<!-- 用户管理 -->
<template>
    <div class="page-box h100 display-flex czbj">
        <p class="title-label">用户列表</p>
        <div class="mt10">
            <dxtable czWidth="240" :dataJson="dataJson" :portUrl="portUrl" :isshowXz="false" :qx="qx" :czFun="czFun"
                ref="databale">
            </dxtable>
        </div>
        <n-modal v-model:show="showModal" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>消费记录</div>
            </template>
            <div>
                <expenseCalendar :openid="openid"></expenseCalendar>
            </div>
            <template #action>
                <div class="tr">
                    <n-button> 取消 </n-button>
                </div>
            </template>
        </n-modal>
    </div>
</template>
<script lang='ts' setup>
import dxtable from "./../../components/util/dxtable.vue";
import { dxget, dxpost, qurl, hf } from "./../../util/index";
import { h, ref, reactive } from "vue";
import { NButton } from "naive-ui"
import expenseCalendar from "./expenseCalendar.vue";
const showModal = ref(false)
const openid = ref()
const initeer = () => {
    databale.value.initDataExpose();
};
const databale = ref();
// 弹窗公用该列表
let dataJson = reactive([

    {
        title: '头像',
        key: 'headimgurl',
        render(row) {
            return h('img', { class: "dsfsdtrtr", src: row.headimgurl })
        }
    },
    {
        title: "昵称",
        key: "nickname",
        search: true, // 是否在搜索栏展示
    },
    {
        title: "用户类型",
        key: "userType",
        search: true, // 是否在搜索栏展示
        type: "select",
        options: [{
            label: "全部",
            value: ""
        }, {

            label: "普通用户",
            value: "1"
        }, {
            label: "高质量用户",
            value: "2"
        }],
        render(row) {
            return row.userType == 2 ? '高质量用户' : "普通用户"
        }
    },
    {
        title: "openid",
        key: "openid",
    },

    {
        title: "登录ip",
        key: "ip",
    },
    {
        title: "所在城市",
        key: "city",
    },
    


]);
const Userid = localStorage.id
let portUrl = "mh/wxcharUser_mh";
const qx = {
    DeletePermissionID: "mhusersListdel", //删除
    EditPermissionIdentifier: "mhusersListbj222", // 编辑
    NewPermissionIdentifier: "mhusersListxz", // 新建
    ViewPermissionID: "mhusersListck", // 查看
};
const czFun = {
    fun: (row) => {
        const userType = row.userType
        return [
            h(
                NButton,
                {
                    type: "info",
                    quaternary: true,
                    onClick: async (e) => {
                        let jjnhe = 2
                        if (userType == 2) {
                            jjnhe = 1
                        }
                        await dxpost(portUrl, { id: row.id, userType: jjnhe }, 'put')
                        row.userType = jjnhe
                    },
                },
                userType == '2' ? '设为普通' : "设为高质量"
            ),
            h(
                NButton,
                {
                    type: "info",
                    quaternary: true,
                    onClick: async (e) => {
                        openid.value = row.openid
                        showModal.value  = true
                    },
                },
                "消费记录"
            ),
        ];
    },
};
</script>


